<template>
	<view class="user-balance" :class="[bgCahangeColor]">
		<!--  标题  -->
		<view class="title">
			<view></view>
			<view class="balance">我的余额</view>
			<view class="detail" @click="toBalanceDetail()">充值明细</view>
		</view>

		<!--  logo  -->
		<view class="logo">
			<view class="icon" :class="[coinColor]"></view>
			<view class="balance">{{userData.account_money}}</view>
		</view>

		<!--  充值金额  -->
		<view class="money">
			<view @click="chooseMoney(item.yuan,index)" v-for="(item,index) in mock" :key="index" class="box"
				:class="[currentIndex===index?'box-on':'box-off']">
				<view class="txt1">{{item.yuan}}元</view>
				<view class="txt2">{{item.bi}}币</view>
			</view>
		</view>

		<!--  充值按钮  -->
		<view class="btn" @click="recharge()">{{ money || 0 }}元</view>
		<view class="Monbtn" @click="getMoney()">提现</view>
		<u-toast ref="uToast" position="center" />
	</view>
</template>

<script>
	import {getCashOut}from '@/api/order.js'
	import {
		createOrder,
		payOrder,
		checkOrder
	} from "../../../api/rechargeOrder";
	import {
		getUser
	} from "../../../api/user";
	import {
		getCode,
		wx_login
	} from "../../../api/login";

	export default {
		async onShow() {
			const res = await getUser(uni.getStorageSync('userInfo').id)
			uni.setStorageSync('userInfo', res.data.data);
		},
		name: "index",
		onLoad() {
			this.userData = uni.getStorageSync('userInfo')
		},
		data() {
			return {
				userData: {},
				money: 30,
				currentIndex: 0,
				mock: [{
						yuan: 30,
						bi: 21,
						tag: 'THIRTY'
					},
					{
						yuan: 100,
						bi: 75,
						tag: 'ONE_HUNDRED'
					},
					{
						yuan: 200,
						bi: 160,
						tag: 'TWO_HUNDRED'
					},
					{
						yuan: 300,
						bi: 255,
						tag: 'THREE_HUNDRED'
					},
					{
						yuan: 500,
						bi: 450,
						tag: 'FIVE_HUNDRED'
					},
					{
						yuan: '1000',
						bi: 1000,
						tag: 'ONE_THOUSAND'
					},
				]
			}
		},
		methods: {
			// 提现
			async getMoney() {
				let res = await getCashOut()
				if(res.data.data){
					uni.navigateTo({
						url: "/subPages/subUser/Withdrawals/index"
					})
				}else{
					// 提示
					this.$refs.uToast.show({
						title:"每月1号提现  详情联系客服"
					})
				}
			},
			chooseMoney(val, index) {
				this.money = val
				this.currentIndex = index
			},
			toBalanceDetail() {
				uni.navigateTo({
					url: '/subPages/subUser/userBalance/balanceDetail/index'
				})
			},
			async recharge() {
				uni.showLoading({
					title: '加载中'
				});
				//创建订单
				const orderMsg = await createOrder({
					"tag": this.mock[this.currentIndex].tag
				})
				if (orderMsg.data.code == 500) {
					uni.hideLoading();
					uni.showModal({
						title: '提示',
						content: '您有未支付的订单，请前往支付',
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/subPages/subUser/userBalance/balanceDetail/index'
								})
							} else if (res.cancel) {

							}
						}
					});
					return
				}
				//获取微信支付所需要的参数
				const payMsg = await payOrder({
					tag: this.mock[this.currentIndex].tag,
					id: orderMsg.data.data.id
				});
				uni.hideLoading();
				//发起微信支付
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: payMsg.data.data.timeStamp, //时间戳
					nonceStr: payMsg.data.data.nonceStr, //随机字符串，长度为32个字符以下。
					package: payMsg.data.data.packageVal, //统一下单接口返回的 prepay_id 参数值，提交格式如：prepay_id=xx。
					signType: payMsg.data.data.signType, //签名算法，应与后台下单时的值一致
					paySign: payMsg.data.data.paySign, //签名，
					success: async function(res) {
						//手动查询订单，修改订单状态
						const result = await checkOrder({
							id: orderMsg.data.data.id
						})
						const user = await getUser(uni.getStorageSync('userInfo').id)
						uni.setStorageSync('userInfo', user.data.data);
						this.userData = user.data.data
						uni.showToast({
							title: '修改成功',
							duration: 2000
						});
						const {
							code
						} = await getCode()
						const loginMsg = await wx_login(code)
						if (loginMsg.data.msg != '用户不存在') {
							uni.setStorageSync('token', loginMsg.data.data.token);
							uni.setStorageSync('userInfo', loginMsg.data.data.user);
							uni.setStorageSync('couponNum', loginMsg.data.data.couponNum);
						}
						uni.redirectTo({
						    url: '/subUser/userBalance/index',
						});
					},
					fail: function(err) {}
				});

			}
		},
		computed: {
			bgCahangeColor() {
				let gender = (this.userData.sex == 2 ? 'boy' : 'girl')
				return `${gender}-bg`
			},
			coinColor() {
				let gender = (this.userData.sex == 1 ? 'boy' : 'girl')
				return `${gender}-coin`
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/lib/css/color.scss';

	.user-balance {
		min-height: 100vh;
		padding: 10rpx;

		.title {
			display: flex;
			justify-content: space-between;

			view {
				flex: 1;
			}

			.balance {
				font-size: 40rpx;
				text-align: center;
			}

			.detail {
				font-size: 24rpx;
				text-align: right;
				line-height: 40rpx;
			}
		}

		.logo {
			margin-top: 100rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			height: 200rpx;

			.icon {
				flex: 1;
				width: 100%;
				background-position: center;
			}

			.balance {
				font-size: 70rpx;
			}
		}

		.money {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			padding: 20rpx;

			.box {
				padding: 30rpx;
				width: 32%;
				display: flex;

				flex-direction: column;
				margin-top: 20rpx;
				border-radius: 20rpx;

				view {
					text-align: center;
				}

				.txt1 {
					font-size: 40rpx;
					font-weight: bold;
				}

				.txt2 {
					font-size: 30rpx;
				}
			}

			.box-on {
				background-color: #e10012;
				color: white;
			}

			.box-off {
				background-color: #ececed;
				color: black;
			}

		}

		.btn {
			padding: 10rpx 40rpx;
			background-color: #e30012;
			color: white;
			text-align: center;
			width: 70%;
			margin: 40rpx auto;
			border-radius: 20rpx;
			font-size: 40rpx;
		}
	}

	.Monbtn {
		background-color: #e30012;
		color: white;
		text-align: center;
		width: 70%;
		padding: 10rpx 40rpx;
		margin: auto;
		border-radius: 20rpx;
		font-size: 40rpx;
	}
</style>
